<template>
    <div class="photos-container">
        <div class="floating-elements">
            <div class="floating-square"></div>
            <div class="floating-circle"></div>
            <div class="floating-triangle"></div>
        </div>

        <div class="container">
            <div class="nav-header">
                <div class="left-section">
                    <router-link to="/home" class="back-link">
                        <svg class="back-icon" viewBox="0 0 24 24" width="24" height="24">
                            <path fill="currentColor"
                                d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z" />
                        </svg>
                        <span>首页</span>
                    </router-link>
                    <h1>照片墙</h1>
                </div>
            </div>

            <!-- 分类选择 -->
            <div class="categories cards">
                <button class="category-btn" :class="{ active: selectedCategory === '' }"
                    @click="selectedCategory = ''">
                    全部
                </button>
                <button v-for="category in categories" :key="category" class="category-btn"
                    :class="{ active: selectedCategory === category }" @click="handleCategoryClick(category)">
                    {{ category }}
                </button>
            </div>

            <!-- 照片网格 -->
            <div v-loading="loading" class="photos-grid">
                <div v-for="photo in filteredPhotos" :key="photo.id" class="photo-item cards"
                    @click="showPhotoDetail(photo)">
                    <div class="photo-content">
                        <el-image :src="photo.url" :alt="photo.category" fit="cover" loading="lazy"
                            referrerPolicy="no-referrer" class="photo-image">
                            <template #error>
                                <div class="image-error">
                                    <el-icon>
                                        <Picture />
                                    </el-icon>
                                    <span>加载失败</span>
                                </div>
                            </template>
                            <template #placeholder>
                                <div class="image-placeholder">
                                    <el-icon>
                                        <Loading />
                                    </el-icon>
                                </div>
                            </template>
                        </el-image>
                        <div v-if="photo.isPrivate" class="private-badge">
                            <svg viewBox="0 0 24 24" width="16" height="16">
                                <path fill="currentColor"
                                    d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6z" />
                            </svg>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 照片预览弹窗 -->
            <div v-if="selectedPhoto" class="photo-modal" @click="selectedPhoto = null">
                <el-image :src="selectedPhoto.url" :alt="selectedPhoto.category" fit="contain" class="modal-image"
                    referrerPolicy="no-referrer">
                    <template #error>
                        <div class="image-error">
                            <el-icon>
                                <Picture />
                            </el-icon>
                            <span>加载失败</span>
                        </div>
                    </template>
                </el-image>
                <button class="close-btn" @click.stop="selectedPhoto = null">&times;</button>
            </div>

            <!-- 密码验证弹窗 -->
            <div v-if="showPasswordModal" class="password-modal">
                <div class="password-container cards">
                    <div class="password-header">
                        <h3>需要密码访问</h3>
                        <p>该相册已加密，请输入正确的访问密码</p>
                    </div>
                    <div class="password-form">
                        <input type="password" v-model="password" @keyup.enter="verifyPassword" placeholder="请输入密码"
                            class="password-input" />
                        <div class="error-message" v-if="passwordError">{{ passwordError }}</div>
                    </div>
                    <div class="password-actions">
                        <button class="cancel-btn" @click="cancelPasswordInput">取消</button>
                        <button class="confirm-btn" @click="verifyPassword">确认</button>
                    </div>
                </div>
            </div>

            <!-- 保存说明 -->
            <div class="save-instruction">所有图片均保存至聚合图床</div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { photoApi } from '@/http/apis/photos'
import type { Photo, PhotoListResponse, PhotoListParams } from '@/http/apis/photos'

const selectedCategory = ref('')
const selectedPhoto = ref<Photo | null>(null)
const showPasswordModal = ref(false)
const password = ref('')
const passwordError = ref('')
const privatePhotosUnlocked = ref(false)
const photos = ref<Photo[]>([])
const loading = ref(false)
const privatePassword = ref('')
const needPassword = ref(false)
const privatePhotos = ref<Photo[]>([])

const categories = ref([
    '风景', '人像', '美食', '旅行', '日常', '私密'
])

// 获取照片列表
const fetchPhotos = async (password?: string) => {
    loading.value = true
    try {
        const params: PhotoListParams = {
            page: 1,
            pageSize: 100
        }

        if (password) {
            params.password = password;
        }

        const response = await photoApi.getPublicPhotoList(params)

        console.log('API Response:', response);

        if (response && response.code === 200 && response.data) {
            photos.value = response.data.list;

            // 根据 isPrivate 属性分配照片
            privatePhotos.value = photos.value.filter(photo => photo.isPrivate); // 过滤出私密照片

            console.log('All Photos:', photos.value);
            console.log('Private Photos:', privatePhotos.value);

            needPassword.value = response.data.list.some(photo => photo.needPassword);
            
            if (password && !needPassword.value) {
                sessionStorage.setItem('photoPassword', password)
                privatePhotosUnlocked.value = true
            }
        } else {
            throw new Error('响应数据格式不正确');
        }
    } catch (error) {
        console.error('获取照片列表失败:', error);
        ElMessage.error('获取照片列表失败')
    } finally {
        loading.value = false
    }
}

const filteredPhotos = computed(() => {
    if (selectedCategory.value === '私密') {
        // 如果选择的是私密分类，返回私密照片
        return privatePhotos.value; // 直接返回私密照片数组
    }

    if (!selectedCategory.value) {
        return photos.value.filter(photo =>
            !photo.isPrivate || (photo.isPrivate && privatePhotosUnlocked.value)
        );
    }

    const filtered = photos.value.filter(photo =>
        photo.category === selectedCategory.value &&
        (!photo.isPrivate || (photo.isPrivate && privatePhotosUnlocked.value))
    );

    console.log('Filtered Photos for category:', selectedCategory.value, filtered);

    return filtered;
})

const handleCategoryClick = (category: string) => {
    if (category === '私密' && !privatePhotosUnlocked.value) {
        showPasswordModal.value = true;
        selectedCategory.value = category;
    } else {
        selectedCategory.value = category;
    }
}

const showPhotoDetail = (photo: Photo) => {
    if (photo.isPrivate && !privatePhotosUnlocked.value) {
        showPasswordModal.value = true
        return
    }
    selectedPhoto.value = photo
}

const verifyPassword = async () => {
    if (!password.value) {
        passwordError.value = '请输入密码';
        return;
    }
    
    try {
        await fetchPhotos(password.value);
        if (!needPassword.value) {
            showPasswordModal.value = false;
            password.value = '';
            passwordError.value = '';
            ElMessage.success('验证成功');
        } else {
            passwordError.value = '密码错误';
        }
    } catch (error) {
        passwordError.value = '验证失败';
    }
}

const cancelPasswordInput = () => {
    showPasswordModal.value = false
    password.value = ''
    passwordError.value = ''
    if (selectedCategory.value === '私密') {
        selectedCategory.value = ''
    }
}

// 初始化加载数据
onMounted(() => {
    const savedPassword = sessionStorage.getItem('photoPassword')
    if (savedPassword) {
        fetchPhotos(savedPassword)
    } else {
        fetchPhotos()
    }
})
</script>

<style scoped>
.photos-container {
    min-height: 100vh;
    position: relative;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #1a1a2e 100%);
    overflow-y: auto;
    color: #fff;
}

.container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* 导航头样式 */
.nav-header {
    display: flex;
    align-items: center;
    margin-bottom: 2rem;
}

.left-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.back-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #fff;
    text-decoration: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    font-size: 1.2rem;
}

.back-link:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateX(-5px);
}

/* 分类按钮样式 */
.categories {
    display: flex;
    gap: 1rem;
    padding: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.category-btn {
    padding: 0.5rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1.5rem;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
    color: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
}

.category-btn:hover {
    background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
    border-color: rgba(255, 255, 255, 0.2);
}

.category-btn.active {
    background: linear-gradient(to right, rgba(91, 37, 195, 0.3), rgba(41, 125, 182, 0.3));
    border-color: rgba(255, 255, 255, 0.3);
    font-weight: bold;
}

/* 照片网格样式 */
.photos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1rem;
    padding: 0.5rem;
}

.photo-item {
    aspect-ratio: 1;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
}

.photo-item:hover {
    transform: scale(1.02);
}

:deep(.el-image__inner) {
    transition: all 0.3s ease;
}

.photo-item:hover :deep(.el-image__inner) {
    transform: scale(1.1);
}

/* 照片预览弹窗样式 */
.photo-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.photo-modal img {
    max-width: 90%;
    max-height: 90vh;
    object-fit: contain;
}

.close-btn {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.close-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: rotate(90deg);
}

/* 响应式适配 */
@media (max-width: 768px) {
    .container {
        padding: 1rem;
    }

    .photos-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0.5rem;
    }

    .category-btn {
        padding: 0.4rem 1rem;
        font-size: 0.9rem;
    }
}

/* 浮动元素和其他样式保持不变 */
.floating-elements {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
}

.floating-square,
.floating-circle,
.floating-triangle {
    position: absolute;
    opacity: 0.15;
    filter: blur(1px);
    animation: float 20s infinite linear;
}

@keyframes float {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(50px, 25px) rotate(90deg);
    }

    50% {
        transform: translate(25px, 50px) rotate(180deg);
    }

    75% {
        transform: translate(-25px, 25px) rotate(270deg);
    }

    100% {
        transform: translate(0, 0) rotate(360deg);
    }
}

.photo-content {
    position: relative;
    width: 100%;
    height: 100%;
}

.photo-image {
    width: 100%;
    height: 100%;
}

.private-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 密码验证弹窗样式 */
.password-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.password-container {
    width: 90%;
    max-width: 400px;
    padding: 2rem;
    animation: modalFadeIn 0.3s ease;
}

.password-header {
    text-align: center;
    margin-bottom: 2rem;
}

.password-header h3 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #fff;
}

.password-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

.password-form {
    margin-bottom: 2rem;
}

.password-input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.password-input:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
}

.error-message {
    color: #ff4d4f;
    font-size: 0.9rem;
    margin-top: 0.5rem;
}

.password-actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.password-actions button {
    padding: 0.6rem 1.2rem;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.cancel-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.8);
}

.cancel-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

.confirm-btn {
    background: linear-gradient(135deg, #5b25c3 0%, #297db6 100%);
    border: none;
    color: #fff;
}

.confirm-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(91, 37, 195, 0.3);
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 添加新的样式 */
.image-error,
.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--el-text-color-secondary);
    font-size: 12px;
    background: var(--el-fill-color-light);
}

.image-error .el-icon,
.image-placeholder .el-icon {
    font-size: 24px;
    margin-bottom: 8px;
}

.image-placeholder .el-icon {
    animation: rotating 2s linear infinite;
}

.modal-image {
    max-width: 90%;
    max-height: 90vh;
}

@keyframes rotating {
    0% {
        transform: rotate(0);
    }

    100% {
        transform: rotate(360deg);
    }
}

.save-instruction {
    color: #fff;
    text-align: center;
    margin: 20px 0;
    font-size: 1rem;
    font-weight: bold;
}

/* 修改照片墙标题和其他文本的字体大小 */
h1 {
    font-size: 2rem; /* 增加照片墙标题的字体大小 */
}

.photo-item {
    font-size: 1rem; /* 增加照片项的字体大小 */
}
</style>
